<form>
    <div class="modal-header">
        <h4>重置用户密码</h4>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" (click)="onClose()">
            <span>&times;</span>
        </button>
    </div>

    <div class="modal-body">
        <br>
        <div class="row">
            <div class="col">
                <span>为用户 {{data.login}} 重置密码：&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <mat-form-field>
                    <input matInput [formControl]="password" type="password" placeholder="密码"
                           minlength="4" maxlength="50">
                    <mat-error *ngIf="(password.dirty || password.touched) && password.hasError('required')">
                        必须输入密码！
                    </mat-error>
                    <mat-error *ngIf="(password.dirty || password.touched) && password.hasError('maxlength')">
                        密码最多50个字符！
                    </mat-error>
                    <mat-error *ngIf="(password.dirty || password.touched) && password.hasError('minlength')">
                        密码最少4个字符！
                    </mat-error>
                </mat-form-field>
            </div>
        </div>
        <br>
    </div>

    <div class="modal-footer">
        <button mat-raised-button (click)="onClose()">
            <span class="fa fa-ban">&nbsp;取消</span>
        </button>
        <button mat-raised-button color="primary" (click)="onSubmit()"
                [disabled]="password.invalid">
            <span class="fa fa-floppy-o">&nbsp;提交</span>
        </button>
    </div>

</form>
